<template>
    <div class="knowledgeSet">
        <div class="header flexbetween" style="margin-bottom: 20px">
            <el-input placeholder="请输入关键字搜索" v-model="keyword" size="small" style="width: 300px">
                <span slot="suffix" class="iconfont icon-sousuo" @click="filterList"></span>
            </el-input>
            <div class="iconBtn">
                <el-tooltip effect="light" content="添加" placement="top" :enterable="false" v-if="menuAuthCodes.includes('M66')">
                    <span class="iconfont icon-tianjia" @click="addOpen"></span>
                </el-tooltip>
            </div>
        </div>
        <element-table :data="setlList" :columns="cloumns" :loading="tableLoading" :tableHeight="tableHeight" :pageNo="pageNo"
                       :pageSize="pageSize" :total="total" @changePageNo="changePageNo" @changePageSize="changePageSize">
        </element-table>

        <el-dialog :title="setTitle" :visible="setVisible" width="640px" :before-close="beforeClose" class="setDialog">
            <el-form label-width="150px" :model="setForm" :rules="setRules" ref="setForm">
                <el-form-item label="知识集名称:" prop="knowledgeSetName">
                    <el-input size="small" v-model="setForm.knowledgeSetName" />
                </el-form-item>
                <el-form-item label="知识集来源:" prop="questionClassIds">
                    <a-tree-select v-model="setForm.questionClassIds" style="width: 100%" :tree-data="knowledgeList" allow-clear
                                   tree-node-filter-prop="title" treeCheckable :replace-fields="replaceFields"
                                   showCheckedStrategy="SHOW_PARENT" @select="selectClass"
                                   :dropdown-style="{ maxHeight: '350px', overflow: 'auto' }" treeDefaultExpandAll />
                </el-form-item>
                <el-form-item label="知识集应用渠道:" prop="sourceIds">
                    <a-select v-model="setForm.sourceIds" style="width: 100%" mode="multiple">
                        <a-select-option v-for="source in sourceList" :key="source.id" :value="source.id">
                            {{ source.sourceName }}
                        </a-select-option>
                    </a-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="setVisible = false" size="small" type="text">取 消</el-button>
                <el-button type="primary" size="small" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import elementTable from "@/components/elementTable";
import { generateOptions } from "@/utils/validate";
import { mapGetters } from "vuex";
import { getClassList, getKnowledgeSetList, addKnowledgeSet, editKnowledgeSet, delKnowledgeSet } from "@/api/knowledge.js";
export default {
    name: "knowledgeSet",
    data() {
        return {
            keyword: "",
            setlList: [],
            tableLoading: false,
            pageNo: 1,
            pageSize: 10,
            total: 0,
            cloumns: [
                {
                    config: {
                        label: "知识集名称",
                        prop: "knowledgeSetName"
                    },
                },
                {
                    config: {
                        label: "应用渠道",
                    },
                    render: (h, scope) => {
                        var sourceNames = scope.sourceNames.join("; ");
                        return (<span>{sourceNames}</span>)
                    }
                },
                {
                    config: {
                        label: "创建时间",
                        prop: "addTime"
                    },
                },
                {
                    config: {
                        label: "创建人",
                        prop: "labelName"
                    },
                },
                {
                    config: {
                        label: "最后更新时间",
                        prop: "updateTime"
                    },
                },
                {
                    config: {
                        label: "操作",
                        width: "100"
                    },
                    render: (h, scope) => {
                        return (
                            <div class="operation">
                                <el-tooltip effect="light" content="编辑" placement="top" enterable={false}
                                    v-show={this.menuAuthCodes.includes('M67')}>
                                    <span class="iconfont icon-bianjidaan" onClick={() => this.editOpen(scope)}></span>
                                </el-tooltip>
                                <el-tooltip effect="light" content="删除" placement="top" enterable={false}
                                    v-show={this.menuAuthCodes.includes('M68')}>
                                    <span class="iconfont icon-shanchu" onClick={() => this.delKnowledgeSet(scope.id)}></span>
                                </el-tooltip>
                            </div>
                        );
                    },
                }
            ],
            editType: "add",
            editId: "",
            setVisible: false,
            setForm: {
                knowledgeSetName: "",
                questionClassIds: [],
                sourceIds: []
            },
            setRules: {
                knowledgeSetName: [{ required: true, message: '请输入知识集名称', trigger: "change" }],
                questionClassIds: [{ required: true, message: '请选择知识集来源', trigger: "change" }]
            },
            knowledgeList: [],
            replaceFields: {
                title: "className",
                value: "id",
                children: 'children',
            },
        }
    },
    created() {
        this.getClassList();
        this.getKnowledgeSetList();
    },
    methods: {
        getKnowledgeSetList() {
            if (!this.menuAuthCodes.includes("M65")) {
                return;
            }
            this.tableLoading = true;
            var param = {
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                keyword: this.keyword
            }
            getKnowledgeSetList(param).then(resp => {
                this.tableLoading = false;
                if (resp.status == 0) {
                    var data = resp.data;
                    this.setlList = data.fileList || [];
                    this.total = data.total;
                } else {
                    this.$antMessage.warning(resp.message);
                }
            });
        },
        filterList() {
            this.pageNo = 1;
            this.getKnowledgeSetList();
        },
        getClassList() {
            getClassList(`/v1/admin/class/getClassList`).then((resp) => {
                this.knowledgeList = generateOptions(resp.data.list || []);
            });
        },
        addOpen() {
            this.editType = "add";
            this.setVisible = true;
        },
        editOpen(data) {
            if (!this.menuAuthCodes.includes("M67")) {
                return;
            }
            this.editId = data.id;
            this.setForm.knowledgeSetName = data.knowledgeSetName;
            this.setForm.questionClassIds = data.questionClassIds;
            this.setForm.sourceIds = data.sourceIds;
            this.editType = "edit";
            this.setVisible = true;
        },
        submit() {
            this.$refs.setForm.validate((valid) => {
                if (valid) {
                    var param = this.setForm;
                    if (this.editType == "add") {
                        addKnowledgeSet(param).then(resp => {
                            if (resp.status == 0) {
                                this.$antMessage.success("添加成功");
                                this.getKnowledgeSetList();
                                this.setVisible = false;
                            } else {
                                this.$antMessage.warning(resp.message);
                            }
                        });
                    } else {
                        param.id = this.editId;
                        editKnowledgeSet(param).then(resp => {
                            if (resp.status == 0) {
                                this.$antMessage.success("编辑成功");
                                this.getKnowledgeSetList();
                                this.setVisible = false;
                            } else {
                                this.$antMessage.warning(resp.message);
                            }
                        });
                    }
                }
            });
        },
        delKnowledgeSet(id) {
            if (!this.menuAuthCodes.includes("M68")) {
                return;
            }
            this.$confirm("是否确定删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delKnowledgeSet({ ids: id }).then((resp) => {
                    if (resp.status == 0) {
                        this.$antMessage.success("删除成功");
                        this.getKnowledgeSetList();
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            }).catch();
        },
        changePageSize(val) {
            this.pageSize = val;
            this.getKnowledgeSetList();
        },
        changePageNo(val) {
            this.pageNo = val;
            this.getKnowledgeSetList();
        },
        selectClass() {
            this.$refs.setForm.clearValidate("questionClassIds");
        },
        beforeClose() {
            this.setVisible = false;
            this.setForm = {
                knowledgeSetName: "",
                questionClassIds: [],
                sourceIds: []
            }
            this.$refs.setForm.resetFields();
        },
    },
    computed: {
        ...mapGetters(["sourceList"]),
        setTitle() {
            return this.editType == "add" ? "知识集添加" : "知识集编辑";
        },
        tableHeight() {
            return document.body.clientHeight - 240;
        },
    },
    components: {
        elementTable
    }
}
</script>

<style lang="scss">
.knowledgeSet {
    .setDialog {
        .el-form-item__content {
            width: 400px;
        }
    }
}
</style>